<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <!-- <el-form-item label="Id">
        <el-input v-model="form.id" :disabled="true" />
      </el-form-item> -->
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>

      <Tree ref="tree" :isfullscreen="isFullScreen" @getCategoryId="getCategoryId" />

      <MarkdownEditor ref="md" @handleFullScreen="handleFullScreen" @getContent="getContent" />

      <!-- {{ testName }} -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { add } from '@/api/article'
// import { getCategory } from '@/api/articleCategory'

import MarkdownEditor from '@/components/MarkdownEditor/index'
import Tree from '@/components/Tree/index'

// import { mapGetters } from 'vuex'

export default {
  name: 'ArticleEdit',
  components: {
    MarkdownEditor,
    Tree
  },
  data() {
    var validateCategory = (rule, value, callback) => {
      if (value > 0) {
        callback()
      }
      return callback(new Error('请选择分类'))
    }

    return {
      id: 0,
      isFullScreen: false,
      form: {
        id: 0,
        title: '',
        categoryId: null,
        categoryName: null,
        content: ''
      },

      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, validator: validateCategory, trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    // console.log(this.$store.getters.testName)
    this.fetchData()
  },
  methods: {
    fetchData() {
      // getCategory().then(response => {

      //   this.category = response.data
      //   this.$refs.tree.setOptions(response.data)
      //   this.$refs.tree.setCategoryId(this.form.categoryId)
      // })
    },
    getContent(val) {
      this.form.content = val
    },
    getCategoryId(val) {
      this.form.categoryId = val
    },
    handleFullScreen(isFullScreen) {
      console.log('全屏')
      this.isFullScreen = isFullScreen
    },
    onSubmit(formName) {
      console.log(this.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            'title': this.form.title,
            'content': this.form.content,
            'category_id': this.form.categoryId
          }
          console.log(params)
          add(params).then(response => {
            if (response.code === 0) {
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
              this.reload()
            } else {
              console.log(response.message)
              this.$notify.error({
                title: '错误',
                message: response.message,
                duration: 2000
              })
            }
          })
        } else {
          return false
        }
      })
    },
    reload() {
      location.reload()
      // const path = '/article/add/'
      // this.$router.push({
      //   path,
      //   query: {
      //     t: +new Date()
      //   }
      // })
    }

  }
}
</script>

<style scoped>

</style>

